<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberaccount">账户信息</router-link>
      <router-link tag="li" to="/ymMemberaccountamendtel">修改手机号</router-link>
      <router-link tag="li" to="/ymMemberaccountamendneweimal">修改邮箱</router-link>
      <router-link tag="li" to="/ymMemberaccountamendpassword">修改密码</router-link>
      <router-link tag="li" v-if="user.shop == 0" to="/ymMemberapplyforverify">申请验证</router-link>
    </ul>
    <div class="error">
      <el-steps :space="200" :active="1" finish-status="success">
        <el-step title="身份验证"></el-step>
        <el-step title="修改新手机"></el-step>
        <el-step title="成功"></el-step>
      </el-steps>
      <div class="content">
        <div class="message">
          <div class="message-left">
            <p>新手机号</p>
            <p>验证码</p>
            <p>短信验证码</p>
          </div>
          <div class="message-right">
            <div class="input">
              <input v-model="newMobile" type="text" placeholder="" /><span class="color">验证成功，请输入手机号</span>
            </div>
            <div class="input">
              <input v-model="picCode" type="text" placeholder="" /><span class="img">
              <img height="35px" width="95px" :src="picurl" /></span>
              <span class="color cm" @click="changeValidateCode">看不清，换一张</span>
            </div>
            <div class="input">
              <input v-model="mobileCode" type="text" placeholder="" />
              <button id="getValidateCode" class="btnh" @click="getMobileMessage" style="cursor: pointer;">获取验证码</button>
              <span class="color">{{time}} 秒后可重新发送</span>
            </div>
            <div class="submit" @click="commit" style="cursor: pointer;">提交</div>
            <!--<router-link tag="div" to="/ymMemberaccountamendtelover" class="submit">提交</router-link>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yingmoo-store",
  data(){
  	return {
  		requestAddr:this.GLOBAL.addr,
  		user:{},
  		newMobile:'',
  		picCode:'',
  		mobileCode:'',
  		picurl:this.requestAddr+'/Login/getValidateCode?type=1&data='+new Date(),
  		flag1:false,
  		flag2:false,
  		flag3:false,
  		time:30
  	}
  },
  mounted(){
  	this.getUser();
  },
  methods:{
  	getUser:function(){
			var data = localStorage.getItem("user");
			if(data != null){
				this.user = JSON.parse(localStorage.getItem("user"));
			}
		},
		/*刷新图片验证码*/
		changeValidateCode:function(){
			this.picurl = this.requestAddr+"/Login/getValidateCode?type=1&date="+new Date();
		},
		checkValidateCode:function(){
			if(this.picCode ==''||this.picCode == null){
				alert("验证码不可为空！")
				this.flag2 = false;
				return;
			}
			this.$http.post(this.requestAddr+"/Login/confirmPicCode",{"picCode":this.picCode},{emulateJSON:true,withCredentials:true}).then(
				(res)=>{
					if(res.data.result == 'no'){
						alert("验证码输入错误或已过期！");
						this.flag2 = false
					}
					if(res.data.result == "ok"){
						this.flag2 = true
						return
					}
				}
			)
		},
		checkmobile:function(){
			var regex = /^1[3|4|5|7|8][0-9]\d{8}$/;
			var phone = this.newMobile;
			if(this.isEmpty(phone)){
				alert("手机号不能为空！");
				this.flag1 = false
				return
			}else if(regex.test(phone)){
				this.$http.post(this.requestAddr+"/Login/mobileIsExist",{"mobile":phone},{emulateJSON: true}).then(
		      (res)=>{
		      	var d = res.data;
		      	if(d.code == 0 && d.result == 'yes'){
		      		alert("该手机号已被注册！");
		      		this.flag1 = false
		      		return
		      	}else{
		      		this.flag1 = true
		      		return 
		      	}
		      }
		    )
			}else{
				alert("请输入有效的手机号码！")
				this.flag1 = false;
				return
			}
		},
		getMobileMessage:function(){
			this.checkmobile();
			this.checkValidateCode();
			if(this.flag1==false || this.flag2==false){return}
			var btn = document.getElementById("getValidateCode");
			this.$http.post(this.requestAddr+"/Login/getShortMessageCode",{"mobile":this.newMobile,"picCode":this.picCode,"type":1},{emulateJSON:true,withCredentials:true}).then(
				(res)=>{
					if(res.data.code == 0){
						btn.disabled = 'true';
						btn.style.background="#999999";
						this.changeValidateCode()
						this.countDown()
					}
				}
			)
		},
		checkModileCode:function(){
			this.$http.post(this.requestAddr+"/Login/checkSMCValue",{"mobileCode":this.mobileCode},{emulateJSON:true,withCredentials:true}).then(
				(res)=>{
					console.log(res.data)
					if(res.data.code != 0){
						this.flag3 = false
						return
					}else{
						this.flag3 = true
						return
					}
				}
			)
		},
		commit:function(){
			this.checkmobile();
			if(this.flag1 == false){
				return
			}
			if(this.isEmpty(this.mobileCode)){
				alert("请先输入获取到的验证码！")
				this.flag3 = false
				return
			}
			this.checkModileCode();
			if(this.flag3 == false){
				alert("手机验证码输入不正确！")
				return
			}
			this.user.mobile = this.newMobile;
			this.$http.post(this.requestAddr+"/GetJson/changeMobile",this.user,{emulateJSON:true}).then(
				(res)=>{
					if(res.data.code==0){
						localStorage.setItem("user",JSON.stringify(this.user));
						window.location.href = "../#/ymMemberaccountamendtelover"
					}
				}
			)
		},
		countDown:function(){
			var btn = document.getElementById("getValidateCode");
			(this.time) -= 1
			var timer = setTimeout(this.countDown,1000)
			if(this.time == 0){
				clearTimeout(timer);
				this.time = 30
				btn.removeAttribute("disabled");
				btn.style.background="#036EB7"
			}
			
		},
		/*判断是否为空*/
		isEmpty:function(param){
			if(param != null && param.trim() != ''){
				return false;
			}else{
				return true;
			}
		}
  }
}
</script>
<style scoped>
  .el-steps{
    width: 500px;
    padding-left: 100px;
    padding-top: 35px;
  }
</style>
<style scoped lang="less">
.yingmoo-store{
  width: 100%;
  .nav{
    width: 1200px;
    height: 46px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    li{
      list-style: none;
      width: 90px;
      height: 30px;
      margin: 0 20px;
      line-height: 30px;
      color: #666666;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      &:nth-child(2){
        background-color: #036eb7;
        color: white;
      }
      &:hover{
        background-color: #036eb7;
        color: white;
      }
    }
  }
  .error{
    width: 1200px;
    height: 560px;
    background-color: white;
    margin: 0 auto;
  .content{
    width: 1200px;
    height: 470px;
    background-color: white;
    margin: 0 auto;
    margin-bottom: 30px;
    h4{
      font-size: 16px;
      color: #333333;
      font-weight: bold;
      padding-left: 40px;
      padding-top: 40px;
    }
    .message{
      display: flex;
      .message-left{
        p{
          width: 145px;
          text-align: right;
          line-height: 60px;
          font-size: 12px;
          color: #333333;
          &:nth-child(1){
            margin-top: 20px;
          }
        }
      }
      .message-right{
        margin-left: 25px;
        .name{
          margin-top: 30px;
          line-height: 37px;
        }
        p{
          line-height: 23px;
          color: #999999;
          font-size: 14px;
          margin-top: 38px;
          span{
            margin-left: 10px;
            img{
              margin-right: 3px;
            }
          }
        }
        div{
          margin-top: 25px;
          input{
            width: 503px;
            height: 31px;
            padding-left: 10px;
            font-size: 14px;
            outline: none;
            border-radius: 3px;
            border: 1px solid #dddddd;
          }
          .img{
            img{
              position: relative;
              top: 10px;
              left: 15px;
            }
          }
          .color{
            color: #f29600;
            font-size: 14px;
            padding-left: 15px;
            cursor: pointer;
          }
          .cm{
            padding-left: 30px;
          }
          .btnh{
            width: 110px;
            height: 35px;
            background-color: #036EB7;
            color: white;
            display: inline-block;
            margin-top: 0;
            margin-left: 15px;
            text-align: center;
            line-height: 35px;
            border-radius: 5px;
          }
        }
        .submit{
          width: 103px;
          height: 30px;
          color: white;
          background-color: #f29600;
          text-align: center;
          line-height: 30px;
          border-radius: 7px;
          margin-top: 44px;
        }
      }
    }
  }
  }
}
</style>
